<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Vue 实现留言板 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        #app{
            text-align: center;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            {{msg}}
        </div>
        <div>
            <h2>显示留言</h2>
            <div>
                <ul>
                    <li v-for="(item,index) in list" > 
                        <p> {{index+1}} :  {{item.title}}</p>
                        <button v-on:click="likeaction(item,index)">点赞 ({{item.like}})</button>
                        <button v-on:click="updateone(item,index)">修改</button>
                        <button v-on:click="list.splice(index,1)">删除</button>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <h2>添加留言</h2>
            <div>
                <p><input type="text" placeholder="请输入" v-model="value" ></p>
                <button v-on:click="addToList">提交</button>
            </div>
        </div>
    </div>
    <script>

        // splice(index,length,newItem)
        // splice(index,length)  删除多少个 
        // splice(index,1,newItem) 替换
        // splice(index,0,newItem) 添加 
        
        const vm = new Vue({
            el:"#app",
            data:{
                msg:"Vue 实现留言板",
                value:'',
                list:[
                    {
                        title:"Vue so easy",
                        like:0
                    },
                    {
                        title:"jquery so sad",
                        like:0
                    },
                    {
                        title:"php + mysql so black",
                        like:0
                    }
                ]
            },
            methods:{
                likeaction(item,index){
                    item.like = item.like+1;   // 浅拷贝  
                    this.list.splice(index,1,item);7
                    // this.list.splice(index,1,{...item,like:++item.like}) 
                },
                updateone(item,index){
                    var value = window.prompt(index,item.title);
                    console.log(value)
                    if(value){
                        item.title  = value;
                        this.list.splice(index,1,item)
                    }
                },
                addToList(){
                    this.list.push({
                        title:this.value,
                        like:0
                    })
                    this.value = ""
                }
            }
        })
    </script>
</body>
</html>